<template>
  <div>
    <!-- <el-button :plain="true" @click="open4">错误</el-button> -->
    <div class="box">
      <div class="form-box">
        <div class="img-box">
          <i class="el-icon-s-shop"></i>
          <p>mall-admin-web</p>
        </div>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="name">
            <el-input
              v-model="form.tel"
              prefix-icon="el-icon-user-solid"
              placeholder="请输入手机号"
              type="tel"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              show-password
              type="password"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="logins" class="the-btn"
              >登录</el-button
            >
            <el-button type="info" @click="reset" class="the-btn"
              >获取体验账号</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="foot-box"></div>
    </div>
  </div>
</template>

<script>
import { login } from "@/request/api/login";
export default {
  data() {
    return {
      form: {
        tel: "",
        password: "",
      },
      rules: {
        tel: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    logins() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await login("/login", {
            tel: this.form.tel,
            password: this.form.password,
          });
          console.log(res.data.msg);
          let { token, msg } = res.data;
          localStorage.setItem("token", token);
          localStorage.setItem("user", this.form.tel);
          if (msg == "登录成功") {
            this.$router.push({
              path: "/home",
            });
          } else {
            this.$message.error("账号或密码错误,请检查或联系管理员");
          }
        } else {
          console.log("错误");
        }
      });
    },
    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>


<style scoped>
.box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #dbd9d9;
  position: relative;
  z-index: 0;
}
.form-box {
  width: 600px;
  padding: 20px;
  height: 400px;
  /* border-radius: 15px; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: white;
  border-top: 10px solid #3f9efe;
  z-index: 2;
}
.img-box {
  /* height: 100px; */
  margin: 0 auto;
  /* border-radius: 50%; */
  background: white;
  /* border: 1px solid #999; */
}
.img-box i {
  font-size: 70px;
  color: #3f9efe;
}
.img-box p {
  font-size: 40px;
  color: #3f9efe;
}
.the-btn {
  width: 250px;
  height: 50px;
}
.foot-box {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 200px;
  background: #3f9efe;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>